<template>
    <svg aria-hidden="true" :class="customCss">
        <use :href="symbolId" ></use>
    </svg>
</template>

<script setup>
import { defineProps, computed } from 'vue';

/**
 * 定义组件 Props (父组件可以传入的参数)
 * @property {String} [prefix='icon'] - symbol 前缀，用于构建 symbalId
 * @property {String} name - 图标名称(必需)，对应 SVG文件名
 * @property {String} [customCss=''] - 自定义 CSS 类名
 */
const props = defineProps({
    prefix: {
        type: String,
        default: 'icon'
    },
    name: {
        type: String,
        required: true
    },
    customCss: {
        type: String,
        default: ''
    }
})

/**
 * 计算 symbalId
 * @returns {String} 格式为 "#profix-name" 字样
 * @example 当 prefix = "icon", name = "arrow" 的时, 返回 "#icon-arrow"
 */
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
